<template>
	<view class="page">
		<view class="pageH dis_f_l_c hyy">
			<view class="left">
				<u-input class="input box" v-model="keyWords" placeholder="请输入搜索内容" border="none" confirmType="search"
					@confirm="search" clearable></u-input>
			</view>
			<view class="right dis_f_c_c" @click="searchFun">
				<text>搜索</text>
			</view>
		</view>
		<view class="pageS">
			<view class="list">
				<view class="ul">
					<view class="li" v-for="(item,index) in listData" :key="index">
						<view class="title" v-if="item.type!=3">
							<text selectable>{{item.title}}</text>
						</view>
						<template v-if="item.type==0">
							<!-- 判断 -->
							<view class="valTip">
								<text>答案选</text>
								<template v-if="item.vals[0]">
									<text class="true">正确</text>
								</template>
								<template v-else>
									<text class="true">错误</text>
								</template>
							</view>
						</template>
						<template v-else-if="item.type==1">
							<!-- 单选 -->
							<view class="ul" :class="item.br">
								<block v-for="(data,dataI) in item.list" :key="dataI">
									<view class="li dis_f"
										:class="{'true':item.vals[0]==data.val,'select':item.myVals.indexOf(data.val)!=-1}"
										@click="chooseFun(item,data.val)">
										<view class="left"
											:class="{'noBgc':item.vals[0]!=data.val&&item.myVals[0]!=data.val}">
											<text>{{data.val}}</text>
										</view>
										<view class="right">
											<text>{{data.content}}</text>
										</view>
									</view>
								</block>
							</view>
							<view class="valTip">
								<text>答案选</text>
								<text class="true">{{item.vals[0]}}</text>
							</view>
						</template>
						<template v-else-if="item.type==2">
							<!-- 多选 -->
							<view class="ul choose">
								<block v-for="(data,dataI) in item.list" :key="dataI">
									<view class="li dis_f" :class="{'select':item.myVals.indexOf(data.val)!=-1}"
										@click="chooseFun(item,data.val)">
										<view class="left">
											<text>{{data.val}}</text>
										</view>
										<view class="right">
											<text>{{data.content}}</text>
										</view>
									</view>
								</block>
							</view>
							<view class="valTip">
								<text>答案选</text>
								<text class="true">{{item.vals.join("、")}}</text>
							</view>
						</template>
						<template v-else-if="item.type==3">
							<!-- 填空 -->
							<view class="valTip">
								<block v-for="(text,index) in getTkListFun(item)" :key="index">
									<template v-if="index!=0&&inputObj[item._id]">
										<text class="true" selectable>{{item.vals[index-1]}}</text>
									</template>
									<text selectable>{{text}}</text>
								</block>
							</view>
						</template>
						<template v-else-if="item.type==4">
							<!-- 简答 -->
							<text>{{item.content||"暂无"}}</text>
						</template>
					</view>
				</view>
			</view>
		</view>
		<view class="pageF">

		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow,
		onReachBottom,
		onShareAppMessage
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive,
		getCurrentInstance
	} from 'vue'
	// 公用方法
	let {
		proxy
	} = getCurrentInstance();
	let $js = proxy.$js;

	// 页面加载
	onLoad((e) => {

	})

	// 是否为返回页面
	let back = false;
	// 页面显示
	onShow(() => {
		// 如果是返回当前页面
		if (back) {

		} else {
			back = true;
		}
	})

	// 要展示的列表数据
	let listData = ref([]);
	// 搜索关键字
	let keyWords = ref("");
	const db = uniCloud.database();
	// 点击搜索
	function searchFun() {
		let searchVal = keyWords.value.trim();
		if (searchVal) {
			const queryRe = new RegExp(searchVal, 'i')
			db.collection("fljwz-question-bank").where(`${queryRe}.test(title)`).get({
				getCount: true
			}).then((res) => {
				let {
					errCode,
					data,
					count
				} = res.result
				listData.value = data;
			})
		}
	}

	let inputObj = ref({});

	// 获取填空列表数据
	function getTkListFun(item) {
		if (!inputObj.value[item._id]) {
			inputObj.value[item._id] = [];
			item.title.match(/<input>/g).map((e) => {
				inputObj.value[item._id].push("");
			});
		}
		return item.title.split("<input>");
	}

	// 页面触底
	onReachBottom(() => {

	})

	// 分享
	onShareAppMessage(() => {
		return $js.getShareObjFun();
	})
</script>

<style lang="scss" scoped>
	.page {
		min-height: calc(100vh - var(--window-top));
	}

	.pageH {
		position: fixed;
		top: var(--window-top);
		left: 0;
		width: 100%;
		height: 100rpx;
		background: #fff;

		.left {
			min-width: 0;
			flex: 1;
			height: 100%;
			padding-right: 20rpx;

			.input {
				width: 100%;
				height: 100%;
			}
		}

		.right {
			flex: none;
			width: 120rpx;
			height: 100%;
			background: #00aaff;
			color: #fff;
		}
	}

	.pageS {
		padding-top: 120rpx;
		background: #fff;

		.list {
			&>.ul {
				padding: 0 24rpx;

				&>.li {
					padding: 20rpx 0;
					line-height: 32rpx;
					border-bottom: 1px solid #f0f0f0;

					&:last-child {
						border-bottom: none;
					}

					.title {
						font-size: 28rpx;
						font-weight: bold;
						margin-bottom: 6rpx;
					}

					.ul {
						font-size: 26rpx;
						margin-bottom: 6rpx;
					}

					.valTip {
						font-size: 26rpx;

						.true {
							color: red;
							margin-left: 6rpx;
						}
					}
				}
			}
		}
	}

	.pageF {}
</style>